<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script src="./react.js"></script>
<script src="./react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    /* 
    setState特性 v17：
    1. 既可以是同步的又可以是异步的：当setSate在受react控制事件使用时就是异步的,在不受react事件控制的时候使用时就是同步的过程。例如 setTimeout、onclick.... 
    2. setState在受react事件控制时使用会将多个setState合并更新，在不受react事件控制时使用不会将多个setState合并更新。
    3. setState只要被调用render就会执行
    */
    class App extends React.Component{
        state={
             num:0,
             name:"张三"
        }
        render(){
            console.log("渲染")
            return (
                <div>
                    <h1>{this.state.num}---{this.state.name}</h1>
                    <button onClick={()=>{
                        // 异步
                        this.setState({
                            num:10
                        },()=>{
                            console.log("更新完了：",this.state.num)
                        })
                        console.log(this.state.num)
                    }}>add</button>
                    <button onClick={()=>{
                        setTimeout(()=>{
                            // 同步
                            this.setState({
                                num:5
                            })
                            console.log(this.state.num)
                        },1000)
                    }}>+5</button>
                    <button onClick={()=>{
                       setTimeout(() => {
                        this.setState({
                            num:20
                        })
                        this.setState({
                            name:"李四"
                        })
                       }, 1000);
                    }}>改变name</button>
                    <button onClick={()=>{
                        // this.setState({
                        //     num:100,
                        //     name:"王五"
                        // })
                        this.setState((state)=>{
                            // 老的状态
                            console.log(state)
                            return{
                                num:state.num+100,
                                name:"王五"
                            }
                        })
                        console.log(this.state.num)
                    }}>
                       setState另一种写法    
                    </button>
                 </div>
            )
        }
    }
    ReactDOM.render(<App/>,document.getElementById("root"))

    /* 
        reactV18 setState特性：
         在 react18中 setState其他特性和React17一样，唯一发生改变的是 在不受react事件控制时调用setState 也是异步的过程，并且也会将多个setState合并更新，render方法只会调用一次，而react17不能合并更新
    */
</script>
</html>